<template>
	<view class="Footer">
		<button class="Footer-button" :disabled='props.disabled' @click="$emit('click')"
		:style="{backgroundColor: props.disabled ? '#4d4d4d' : '#000'}">
			<text>{{butText}}</text>
		</button>
		<view class="safe-bottom"></view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue';
	const props = defineProps({ 
		butText:{
			type:String,
			default:''
		},
		disabled:{
			type:Boolean,
			default:false
		},
	})
</script>

<style lang="scss" scoped>
	.Footer{
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		.Footer-button{
			width: 100%;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			background-color: #000;
			text{
				font-size: 30rpx;
				font-weight: 400;
				color: #fff;
			}
		}
		.safe-bottom{
			height: 60rpx;
			background-color: #fff;
		}
	}
</style>